<template>
  <div class="purchasing-plan">
    <div class="carousel-list">
      <el-carousel
        :autoplay="false"
        :loop="false"
        arrow="always"
        height="150px"
        trigger="click"
      >
        <el-carousel-item
          v-for="(item, i) in carousel"
          :key="i"
          style="display: flex"
        >
          <Ring1
            v-for="(val, j) in item"
            :key="j"
            :activeSwiper="activeSwiper"
            :item="val"
            @swiperChange="swiperChange"
          ></Ring1>
        </el-carousel-item>
      </el-carousel>
      <div ref="barBox" class="bar-box"></div>
      <div class="box-3">
        <div class="card-tit">各工厂执行情况</div>
        <div class="card-sub-tit">工厂名称</div>
        <div>
          <el-carousel
            :autoplay="false"
            :loop="false"
            arrow="always"
            height="150px"
            trigger="click"
          >
            <el-carousel-item
              v-for="(item, i) in comList"
              :key="i"
              style="display: flex"
            >
              <Ring2
                v-for="(val, j) in item"
                :key="j"
                :activeSwiper="activeSwiper"
                :item="val"
                @swiperChange="swiperChange"
              ></Ring2>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="box-3-bottom">
          <div class="box-3-left">
            <div>2024年 电池一铵 C工厂</div>
            <div ref="barBox2" class="bar-box2"></div>
          </div>
          <div class="box-3-right">
            <div class="link" @click="goPage">查看明细 <i class="el-icon-question"></i></div>
            <div class="text1">原因分析</div>
            <div class="text2">销售量不足</div>
          </div>
        </div>

        <div class="box-4">
          <div class="box-4-left">
            <div class="card-tit">趋势分析</div>
            <div class="card-sub-tit">电池一铵</div>
            <div ref="line1" class="line-chart">
            </div>
          </div>
          <div ref="barBox3" class="box-4-right"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 业务执行-销售计划-->
<script>
import *as  echarts from 'echarts'

import Ring1 from "./components/ring1.vue";
import Ring2 from "./components/ring2.vue";
import {carouselList, comList} from "./hooks";
import {getChart1Option, getChart2Option, getChart3Option, getChart4Option} from "./chartOption";

export default {
  name: "purchasingPlan",
  components: {Ring1, Ring2},
  data () {
    return {
      carousel: carouselList,
      activeSwiper: "",
      comList: comList
    };
  },
  mounted () {
    this.initBar1();
    this.initBar2();
    this.initLine1()
    this.initBar3()
  },
  methods: {
    swiperChange (val) {
      console.log(val);
      this.activeSwiper = val.name;
    },
    initBar1 () {
      let chart = echarts.init(this.$refs.barBox);
      let option = getChart1Option();
      chart.setOption(option);
      window.onresize = () => {
        chart.resize();
      };
    },
    initBar2 () {
      let chart = echarts.init(this.$refs.barBox2);
      let option = getChart2Option();
      chart.setOption(option);
      window.onresize = () => {
        chart.resize();
      };
    },
    initLine1 () {
      let chart = echarts.init(this.$refs.line1);
      let option = getChart3Option();
      chart.setOption(option);
      window.onresize = () => {
        chart.resize();
      };
    },
    initBar3 () {
      let chart = echarts.init(this.$refs.barBox3);
      let option = getChart4Option();
      chart.setOption(option);
      window.onresize = () => {
        chart.resize();
      };
    },
    goPage(){
      this.$router.push({path: '/purchasingPlanDetail'})
    }
  }
};
</script>

<style lang="scss" scoped>
.purchasing-plan {
  width: 100%;
  height: 100%;

  /deep/ .el-carousel__indicators {
    display: none;
  }

  /deep/ .el-carousel__arrow {
    background-color: #dfdfdf;
  }

  /deep/ .el-carousel__arrow--left {
    left: 0;
  }

  /deep/ .el-carousel__arrow--right {
    right: 0;
  }

  .carousel-list {
    .bar-box {
      margin-top: 20px;
      height: 320px;
    }

    .card-tit {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      margin: 12px 0;
    }

    .card-sub-tit {
      font-size: 14px;
      color: #929292;
      margin: 8px 0;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        margin-right: 4px;
        background-color: #ff8417;
      }
    }

    .box-3 {
      .box-3-bottom {
        margin-top: 10px;
        display: flex;
        --box3-height: 150px;

        .box-3-left {
          box-sizing: border-box;
          width: 40%;
          padding: 10px;
          height: var(--box3-height);
          border: 1px solid #a8a8a8;

          .bar-box2 {
            height: 95%;
          }
        }

        .box-3-right {
          margin-left: 20px;
          padding: 20px;
          box-sizing: border-box;
          width: 25%;
          margin-right: 20px;
          height: var(--box3-height);
          border: 1px solid #a8a8a8;
          position: relative;

          .link {
            position: absolute;
            right: 10px;
            color: #1890ff;
            cursor: pointer;
          }

          .text1 {
            color: #929292;
            font-size: 12px;
            margin-bottom: 20px;
          }

          .text2 {
            font-size: 16px;
          }
        }
      }
    }

    .box-4 {
      margin-top: 20px;
      display: flex;
      height: 360px;

      .box-4-left {
        width: 70%;
        display: flex;
        flex-direction: column;

        .line-chart {
          flex: 1;
        }
      }

      .box-4-right {
        width: 30%;
      }
    }
  }
}
</style>
